<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>NETTY SOCKET.IO DEMO</title>
  <base>
  <script src="js/jquery.js"></script>
  <script src="js/socket/socket.io.js"></script>
  <style>
    body {
      padding: 20px;
    }

    #console {
      height: 450px;
      overflow: auto;
    }

    .username-msg {
      color: orange;
    }

    .connect-msg {
      color: green;
    }

    .disconnect-msg {
      color: red;
    }
  </style>
</head>

<body>
<h1>湿度：<span id="data"></span></h1>
<h1>更新时间：<span id="current_time"></span></h1>
<h1>状态：<span id="status"></span></h1>
const socket = io('http://127.0.0.1:8888', 8888表示本地的端口，这个端口跟application.yml 中配置的websocket 的端口要一致。<br/>
socket有两个自带的默认事件：socket.on('connect' 还有socket.on('disconnect',
当服务器端关闭之后，客户端会自动重连，如下图：
<img src="disconnect_detail.png">
<img src="disconnect.png">
</body>
<script type="text/javascript">
  const socket = io('http://127.0.0.1:8888', {
    query: {
      'token': '123'
    },
    extraHeaders: {
      "token": "666"
    }
  });
  socket.on('connect', () => {
    $("#status").html("连接成功")
  })
  socket.on('server_event', data => {
    $("#data").html(data.msg);
    $("#current_time").html(data.date);
  });
  socket.on('disconnect', () => {
    $("#status").html("已下线")
  })
</script>
</html>
